import axios from "axios";
import React, { useState,  useCallback } from "react";


// React.memo() 是用来缓存一个组件用的，只有当前组件内容发生变化的时候才会被重新渲染
//  子组件
const Child = React.memo((props) =>{
    console.log("子组件执行了");
    
    return <h1>
        Child - {props.name}
        <button onClick={()=>props.changeName('21212f')}>修改名字</button>
    </h1>
    
})
function App() {

    const [count,setCount] = useState(100)
    const [name,setName] = useState("带娃发挥纷纷为high")
    
    // 1.先定义接收的方法
    //  useCallback接收两个参数：
    //  第一个参数：接收一个回调函数，这个就是我们需要做缓存的函数
    //  第二个参数：是一个依赖数组，只有依赖被改变的时候才会执行
    const changeName  = useCallback((val)=>{
         setName(val)
    },[])

    // function  changeName(val){
    // }

    return <>
        <h1 id="title">App - {count}</h1>
        <button onClick={()=>setCount(count + 1)}>点击加1</button>
        {/* <button onClick={()=>setName("还得批发")}>点击修改名字</button> */}
        <hr />
        
         {/*2. 将方法通过 props 传递给子组件 */}
        <Child name ={name} changeName={changeName}></Child>

        {/* 
            每次 count 发生变化的时候，都会导致 Child 自己被重新渲染，
            但是 count 的改变跟Child 组件没有任何关联。
            如果每次修改都重新渲染子组件，就会造成资源的浪费，所以要想办法解决让无关组件不需要重新渲染
        */}
    </>
        
}


export default App